<template>
    <div id="video-contianer">
        <canvas style="width: 100%; height: 100%" id="video"></canvas>
        <div class="mask" @click="handleClickVideo" :class="{ 'active-video-border': selectStatus }"></div>
    </div>
</template>
<script>
import '@/plugins/jsmpeg.min'

export default {
    props: {},
    data() {
        return {
            player: null,
        }
    },
    mounted() {
        let canvas = document.getElementById('video')
        let url = 'ws://10.30.18.7:9999'
        this.player = new JSMpeg.Player(url, { canvas })
    },
    destroyed() {

        if (this.player) {
            this.player.destroy()
            this.player = null

        }
    },
    methods: {
        /* 处理双击 单机 */
        dbClick() {
            this.clickCount++
            if (this.clickCount === 2) {
                this.btnFull() // 双击全屏
                this.clickCount = 0
            }
            setTimeout(() => {
                if (this.clickCount === 1) {
                    this.clickCount = 0
                }
            }, 250)
        },
        /* 视频全屏 */
        btnFull() {
            const elVideo = document.getElementById('video')
            if (elVideo.webkitRequestFullScreen) {
                elVideo.webkitRequestFullScreen()
            } else if (elVideo.mozRequestFullScreen) {
                elVideo.mozRequestFullScreen()
            } else if (elVideo.requestFullscreen) {
                elVideo.requestFullscreen()
            }
        },
        /*
      ison用来判断是否需要更换视频流
      dbclick函数用来双击放大全屏方法
      */
        handleClickVideo() {
            if (this.isOn) {
                this.$emit('selectVideo', this.spareId)
                this.dbClick()
            } else {
                this.btnFull()
            }
        },
    },
}
</script>

<style lang="less" scoped>
.active-video-border {
    border: 2px salmon solid;
}
#video-contianer {
    position: relative;
    width: 100%;
    height: 100%;
    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
}
</style>
